<template>
	<action-bar type="back" isWhite="1" title="轮巡计划"></action-bar>
	<tishi ref="showtishi" isclen="1" bgcolor="#fc474c" title="您确定要退出登录吗？"></tishi>
	<view class="patrolinfo u-f u-f-column">
		<view class="navTop">

		</view>
		<view class="content u-f">
			<view class=" color9F9F9F size32 posire conLeft  u-f-column u-f" :class="{conLeft1:conLeft}"
				v-show="!fullScreenFlag">
				<!-- <image mode="widthFix" class="image width60 posiab right0 cursor" src="/static/img/gsuanbi.png"
					style="top: 40%;" @click="conLeft = !conLeft"></image> -->
				<view class="tab u-f-item  border-b3e3e3e">
					<view class="item cursor active">
						设备
						<view class="heng "></view>
					</view>
				</view>

				<view class="u-f u-f-column u-f-jsb flex1" style="overflow: hidden;">
					<view class="flex1 u-f u-f-column" style="overflow: hidden;">
						<view class="leftTop flex-a-i posire mt25">
							<view class="flex-ju-c wh120-60 ra10 bg5c5c5c mr20 cursor"
								:class="{LanSeBeiJing:leftTopIndex==index}" v-for="(item,index) in ['组织','通道']"
								:key="index" @click="leftTopTabClick(index)">
								{{item}}
							</view>
							<el-input v-model="searchName" class="bg1e1e1e flex1 mr50 height60  pl15"
								placeholder="输入通道名称进行搜索" clearable @blur="getDevicesList" />
							<image mode="widthFix" class="image width45 posiab right80" src="/static/img/suosuo.png"
								v-if="!searchName">
							</image>
						</view>
						<view class="leftList ">
							<view class="sanDian " v-if="dataSource.length">
								<el-dropdown placement="bottom-end">
									<view class="dianBox u-f-justify">
										<view></view>
										<view></view>
										<view></view>
									</view>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="getDevicesList">刷新</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</view>
							<el-tree style="height: 100%;background-color: #2C2C2C;color: #fff;" :data="dataSource"
								node-key="id" default-expand-all @check-change="ziyuanShuClick">
								<template #default="{ node, data }">
									<view class="custom-tree-node flex-ju-b width1000">
										<view class="flex-a-i">
											<el-checkbox v-model="data.falg" v-if="data.node_type==2&&tabIndex!=0"
												@change="checkboxChange(data)" />
											<view v-if="data.online_status==1" class="staDian">
											</view>
											<view v-if="data.online_status==2" class="staDian1">
											</view>
											<!-- <view v-else class="staDian1">
								
											</view> -->
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type==3"
												class="image width45" src="/static/img/shexaingtou.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type==3"
												class="image width45" src="/static/img/jiankong/66.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/96.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/97.png">
											</image>
											<view class="labelText">{{data.name}}</view>
										</view>
									</view>
								</template>
							</el-tree>
						</view>
					</view>
				</view>
			</view>
			<view class="rightView">
				<view class="box img u-f-column u-f">
					<view class="top">
						<view class="name u-f-item">
							<view class="text">
								<text>*</text>任务名称：
							</view>
							<view class="inp u-f-item">
								<input type="text" v-model="pollPlanName" name="" id="" placeholder="请输入任务名称"
									style="width: 100%;" />
							</view>
						</view>
						<view class="erHnag u-f-item">
							<view class="chuangkou u-f-item">
								<view class="text">
									<text>*</text>窗口数量：
								</view>
								<view class="inp">
									<uni-data-select v-model="ChuangKouShuLiangValue" :localdata="ChuangKouShuLiangList"
										@change="ChuangKouChange" :clear="false" style="width: 270px;color: #000;"
										class="custom-select">
									</uni-data-select>
								</view>
							</view>
							<view class="chuangkou u-f-item">
								<view class="text">
									<text>*</text>默认停留时间
								</view>
								<view class="miao">
									<el-input class="custom-number-input" v-model="pollStayTime" type="number"
										placeholder="秒" :max="600" :min="20" />
								</view>
								<view class="miaoa">
									秒
								</view>
							</view>
						</view>
						<view class="sanHnag u-f-item">
							<view class="text">
								任务描述：
							</view>
							<view>
								<el-input v-model="pollDesc" maxlength="500" style="width: 570px;" placeholder="请输入任务描述"
									show-word-limit type="textarea" class="custom-textarea" />
							</view>
						</view>
					</view>
					<view class="boxList">
						<view class="tabList u-f-item">
							<view class="tabItem cursor" :class="{tabItem1:tabIndex==0}" @click="tabIndex = 0">
								所有窗口
							</view>
							<view class="tabItem cursor" v-for="(item,index) in ChuangKouShuLiangValue" :key="index"
								:class="{tabItem1:tabIndex == index + 1}" @click="tabIndex = index + 1">
								窗口{{index + 1}}
							</view>
						</view>
						<view class="titleHang u-f-item">
							<view class="item1">
								<text style="padding-left: 24px;">
									通道名称
								</text>
							</view>
							<view class="item2 u-f-justify">
								停留时间（秒）
							</view>
							<view class="item3 u-f-justify">
								预置点
							</view>
							<view class="item4 u-f-justify">
								码流类型
							</view>
							<view class="item5 u-f-justify">
								通道类型
							</view>
							<view class="item6 u-f-justify">
								操作
							</view>
						</view>
						<view v-if="tabIndex==0">
							<view class="itemHang u-f-item" v-for="(item,index) in allList" :key="index">
								<view class="item1">
									<text style="padding-left: 24px;">
										{{item.channelName}}
									</text>
								</view>
								<view class="item2 u-f-justify">
									{{item.channelStayTime}}
								</view>
								<view class="item3 u-f-justify">
									{{item.preparePointName}}
								</view>
								<view class="item4 u-f-justify">
									{{item.streamType==1?'主码流':'子码流'}}
								</view>
								<view class="item5 u-f-justify">
									{{item.channelFacadeType==1?'球机':item.channelFacadeType==2?'半球机':'枪机'}}
								</view>
								<view class="item6 u-f-justify cursor" @click="ShanChuClick1(allList,index,item)">
									<view class="icon u-f-justify">
										<image src="/static/img/jiankong/100.png" class="img" mode="widthFix">
										</image>
									</view>
									<view>删除</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="itemHang u-f-item" v-for="(item,index) in ChuangKouList[tabIndex - 1]"
								:key="index">
								<view class="icon1" @click="moveDown(ChuangKouList[tabIndex - 1],index)">
									<image class="img" src="/static/img/jiankong/102.png" mode="widthFix"></image>
								</view>
								<view class="icon2" @click="moveUp(ChuangKouList[tabIndex - 1],index)">
									<image class="img" src="/static/img/jiankong/103.png" mode="widthFix"></image>
								</view>
								<view class="item1" style="width:368px">
									<text style="padding-left: 24px;">
										{{item.channelName}}
									</text>
								</view>
								<view class="item2 u-f-justify">
									<el-input class="custom-number-input" v-model="item.channelStayTime" type="number"
										placeholder="秒" :max="600" :min="20" />
								</view>
								<view class="item3 u-f-justify">
									<uni-data-select v-model="item.preparePointId" :localdata="item.yuZhiDianList"
										:clear="false" class="custom-width" style="color: #000;"
										@change="ItemYuZhiDianModel(item)" placement="top">
									</uni-data-select>
								</view>
								<view class="item4 u-f-justify">
									<uni-data-select v-model="item.streamType" :localdata="MaLiuType" :clear="false"
										class="custom-width1" style="color: #000;" placement="top">
									</uni-data-select>
								</view>
								<view class="item5 u-f-justify">
									{{item.channelFacadeType==1?'球机':item.channelFacadeType==2?'半球机':'枪机'}}
								</view>
								<view class="item6 u-f-justify cursor"
									@click="ShanChuClick(ChuangKouList[tabIndex - 1],index,item)">
									<view class="icon u-f-justify">
										<image src="/static/img/jiankong/100.png" class="img" mode="widthFix">
										</image>
									</view>
									<view>删除</view>
								</view>
							</view>
						</view>
					</view>
					<view class="caoZuo u-f-item u-f-jsb">
						<view></view>
						<view class="right u-f-item">
							<view class="quxiao u-f-justify cursor" @click="QuXiaoClick">取消</view>
							<view class="baocun u-f-justify cursor" @click="BaoCunClick">保存</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		lkrequest,
	} from '../../js/lk/request.js'
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				dataSource: [],
				leftTopIndex: 0,
				searchName: '',
				ChuangKouShuLiangList: [{
						label: 1,
						value: 1,
					},
					{
						label: 4,
						value: 4,
					},
					{
						label: 6,
						value: 6,
					},
					{
						label: 8,
						value: 8,
					},
					{
						label: 9,
						value: 9,
					},
					{
						label: 16,
						value: 16,
					}
				],
				MaLiuType: [{
						label: '主码流',
						value: 1,
					},
					{
						label: '子码流',
						value: 2,
					}
				],
				ChuangKouShuLiangValue: 1,
				ChuangKouList: [
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
				],
				tabIndex: 0,
				allList: [],
				pollStayTime: 20,
				pollPlanName: '',
				pollDesc: '',
				Iid: null
			}
		},
		onShow() {

			if (flutter) {
				flutter.call('setActionBar', {
					type: 'back',
					title: "轮巡计划",
					isWhite: true,
					onDownloads: "",
					onSettings: '',
					onBack: 'handleBack()',
					onClose: 'handleClickclose()'
				}, (result, error) => {})
			}
			window.handleClickclose = () => {
				uni.$emit('exitclose')
				this.$refs.showtishi.show()
			}
			window.handleBack = () => {
				this.back()
			}
		},
		onLoad(e) {
			if (e.id) {
				this.Iid = e.id
				this.http('/v1/polling/plan/detail', {
					id: this.Iid
				}).then(res => {
					this.pollPlanName = res.data.pollPlanName
					this.pollDesc = res.data.pollDesc
					this.pollStayTime = res.data.pollStayTime
					this.ChuangKouShuLiangValue = res.data.pollWindowNum
					for (let i = 1; i <= res.data.pollWindowNum; i++) {
						this.ChuangKouList[i - 1] = res.data.windowSerialChannels[i]
					}

					this.allList = []
					for (let i = 0; i < 16; i++) {
						if (res.data.pollWindowNum > i) {
							console.log(i)
							if (this.ChuangKouList[i].length) {
								this.ChuangKouList[i].forEach(item => {
									this.allList.push(item)
								})
							}
						} else {
							this.ChuangKouList[i] = []
						}
					}
				})
			}
			this.getDevicesList()
		},
		onReady() {

		},
		methods: {
			getDevicesList() {
				// 设备列表
				this.dataSource = []
				this.http('/v1/organization/tree/list', {
					sourceType: 5,
					searchName: this.searchName,
					searchType: this.leftTopIndex + 1
				}).then(res => {
					this.dataSource = res.data
					this.ShuZhuChongZhu(this.dataSource)
					this.updateFlags(this.dataSource, this.allList)
				})
			},
			updateFlags(dataList, idList) {
				console.log(idList)
				const idSet = new Set(idList.map(item => item.channelId)); // 提取 idList 中的 id 并转换为 Set
				function traverse(list) {
					list.forEach(item => {
						item.falg = false
						if (idSet.has(item.id)) {
							item.falg = true; // 更新 flag
						}
						if (item.children && item.children.length > 0) {
							traverse(item.children); // 递归遍历 children
						}
					});
				}
				traverse(dataList);
			},
			ShuZhuChongZhu(list) {
				list.forEach(item => {
					if (item.node_type == 2) {
						item.falg = false
					}
					if (item.children.length) {
						this.ShuZhuChongZhu(item.children)
					}
				})
			},
			ziyuanShuClick(e) {
				console.log(e)
			},
			ChuangKouChange(e) {
				this.ChuangKouShuLiangValue = e
				this.tabIndex = 0
				this.allList = []
				for (let i = 0; i < 16; i++) {
					if (e > i) {
						console.log(i)
						if (this.ChuangKouList[i].length) {
							this.ChuangKouList[i].forEach(item => {
								this.allList.push(item)
							})
						}
					} else {
						this.ChuangKouList[i] = []
					}
				}
				this.getDevicesList()
			},
			checkboxChange(data) {
				let item = {
					channelId: data.id,
					channelName: data.name,
					channelStayTime: this.pollStayTime,
					preparePointId: '',
					preparePointName: '',
					streamType: 1,
					channelFacadeType: data.camera_type,
					yuZhiDianList: [],
					deviceCode: data.device_code
				}
				if (data.falg) {
					lkrequest(
							`preset/devices/${data.device_code}/channels/${data.id}/queryPresetList`, {},
							'post', 'queryPresetList')
						.then(res => {
							res.data.forEach(item1 => {
								item.yuZhiDianList.push({
									label: item1.presetName,
									value: item1.presetId
								})
							})
							this.ChuangKouList[this.tabIndex - 1].push(item)
							this.allList.push(item)
						})
				} else {
					this.allList = this.allList.filter(item => item.channelId !== data.id);
					for (let i = 0; i < this.ChuangKouList.length; i++) {
						const subArray = this.ChuangKouList[i];
						for (let j = 0; j < subArray.length; j++) {
							if (subArray[j].channelId === data.id) {
								subArray.splice(j, 1); // 删除匹配的项
								return; // 找到后直接退出
							}
						}
					}
				}
			},
			ItemYuZhiDianModel(item) {
				item.yuZhiDianList.forEach(res => {
					if (res.value == item.preparePointId) {
						item.preparePointName = res.label
					}
				})
			},
			ShanChuClick(list, index, data) {
				list.splice(index, 1);
				this.allList = this.allList.filter(item => item.channelId !== data.channelId);
				this.XunHuanList(this.dataSource, data)
			},
			ShanChuClick1(list, index, data) {
				list.splice(index, 1);
				this.XunHuanList(this.dataSource, data)
				for (let i = 0; i < this.ChuangKouList.length; i++) {
					const subArray = this.ChuangKouList[i];
					for (let j = 0; j < subArray.length; j++) {
						if (subArray[j].channelId === data.channelId) {
							subArray.splice(j, 1); // 删除匹配的项
							return; // 找到后直接退出
						}
					}
				}
			},
			moveUp(list, index) {
				if (index > 0) {
					this.swapItems(list, index, index - 1);
				}
			},
			moveDown(list, index) {
				if (index < list.length - 1) {
					this.swapItems(list, index, index + 1);
				}
			},
			swapItems(list, i, j) {
				// 交换数组中的两个元素
				[list[i], list[j]] = [list[j], list[i]];
			},
			XunHuanList(list, data) {
				list.forEach(item => {
					if (item.id == data.channelId) {
						item.falg = false
					} else {
						if (item.children.length) {
							this.XunHuanList(item.children, data)
						}
					}
				})
			},
			QuXiaoClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			BaoCunClick() {

				if (!this.pollPlanName) {
					return ElMessage.error('请输入任务名称！')
				}
				if (!this.pollStayTime) {
					return ElMessage.error('请输入默认停留时间！')
				}

				let arr = []
				for (let i = 0; i < this.ChuangKouShuLiangValue; i++) {
					arr.push(this.ChuangKouList[i])
				}

				const result = arr.reduce((acc, subArray, index) => {
					acc[index + 1] = subArray; // 将下标 + 1 作为 key
					return acc;
				}, {});
				if (this.Iid == null) {
					this.http('/v1/polling/plan/add', {
						pollPlanName: this.pollPlanName,
						pollWindowNum: this.ChuangKouShuLiangValue,
						pollStayTime: this.pollStayTime,
						pollDesc: this.pollDesc,
						windowSerialChannels: result,

					}, 'POST').then(res => {
						ElMessage({
							message: '添加成功',
							type: 'success',
							plain: true,
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					})
				} else {
					this.http('/v1/polling/plan/update', {
						id: this.Iid,
						pollPlanName: this.pollPlanName,
						pollWindowNum: this.ChuangKouShuLiangValue,
						pollStayTime: this.pollStayTime,
						pollDesc: this.pollDesc,
						windowSerialChannels: result
					}, 'POST').then(res => {
						ElMessage({
							message: '保存成功',
							type: 'success',
							plain: true,
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					})
				}


			}
		}
	}
</script>

<style scoped lang="scss">
	.patrolinfo {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		color: #fff;
		background-color: #212121;

		.navTop {
			padding: 0 24px 0 32px;
			background-color: #2C2C2C;
			border-bottom: 1px solid #383838;
			min-height: 50px;
		}

		.content {
			flex: 1;

			.conLeft {
				overflow: hidden;
				transition: all 0.3s;
				height: 100%;
				background: #2c2c2c;

				.leftTop {
					padding-left: 24px;
					margin-bottom: 24px;

					.LanSeBeiJing {
						background: #165fff;
						color: #fff;
					}

					input {
						color: #fff;
					}
				}

				.leftList {
					flex: 1;
					position: relative;

					.custom-tree-node {
						margin-left: 10px;

						.width45 {
							margin-right: 5px;
						}

						.staDian {
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background-color: #00E47C;
							margin-left: 5px;
							margin-right: 10px;
						}

						.staDian1 {
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background-color: #FF5964;
							margin-left: 5px;
							margin-right: 10px;
						}
					}

					.sanDian {
						position: absolute;
						right: 10px;
						top: 10px;
						z-index: 9;

						.dianBox {
							width: 40px;
							height: 16px;
							border: none;

							view {
								width: 4px;
								height: 4px;
								background: #ffffff;
								margin-right: 4px;
							}
						}

					}
				}


				.tab {
					min-height: 42px;

					.item {
						margin: 0 24px;
						position: relative;
						color: #fff;

						.heng {
							position: absolute;
							width: 33px;
							height: 3px;
							background: #ffffff;
							border-radius: 15px;
							bottom: -10px;
						}
					}
				}
			}

			.rightView {
				flex: 1;
				padding: 14px;
				background: #212121;

				.box {
					background: #2c2c2c;

					.top {
						padding: 24px 32px;
						border-bottom: 1px solid #383838;

						.name {
							margin-bottom: 14px;

							.text {
								font-size: 14px;
								color: #FFF;
								margin-right: 6px;
								width: 77px;
								text-align: right;

								text {
									color: #FC474C;
								}
							}

							.inp {
								width: 558px;
								height: 32px;
								background: #5c5c5c;
								border-radius: 2px;

								input {
									padding-left: 5px;
								}
							}
						}

						.erHnag {
							margin-bottom: 14px;

							.chuangkou {
								margin-right: 24px;

								.text {
									font-size: 14px;
									color: #FFF;
									margin-right: 6px;
									min-width: 77px;
									text-align: right;

									text {
										color: #fc474c;
									}
								}

								.inp {
									width: 269px;
									height: 32px;
									background: #5c5c5c;
									border-radius: 2px;
								}

								.miao {
									width: 116px;
									margin-right: 6px;
								}

								.miaoa {
									font-size: 14px;
									color: #FFF;
								}
							}
						}

						.sanHnag {
							.text {
								width: 77px;
								font-size: 14px;
								color: #FFF;
								margin-right: 6px;
								text-align: right;
							}

						}

					}

					.boxList {
						padding: 24px;
						flex: 1;

						.tabList {
							.tabItem {
								padding: 7px 14px;
								background: #1e1e1e;
								font-size: 14px;
								font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
								font-weight: 400;
								text-align: RIGHT;
								color: #ffffff;
								margin-right: 10px;
							}

							.tabItem1 {
								background: #383838;
							}
						}

						.titleHang {
							background: #383838;
							height: 40px;
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #ffffff;

							.item1 {
								flex: 1;
							}

							.item2 {
								flex: 1;
							}

							.item3 {
								flex: 1;
							}

							.item4 {
								flex: 1;
							}

							.item5 {
								flex: 1;
							}

							.item6 {
								flex: 1;

							}
						}

						.itemHang {
							height: 56px;
							background: #383838;
							margin-top: 3px;
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #ffffff;

							.icon1 {
								width: 24px;
								margin: 0 10px;
							}

							.icon2 {
								width: 24px;
								margin: 0 10px;
							}

							.item1 {
								flex: 1;
							}

							.item2 {
								flex: 1;
							}

							.item3 {
								flex: 1;
							}

							.item4 {
								flex: 1;
							}

							.item5 {
								flex: 1;
							}

							.item6 {
								flex: 1;

								.icon {
									width: 25px;
								}

								font-size: 14px;
								font-family: Source Han Sans CN,
								Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #f05862;
							}
						}
					}

					.caoZuo {
						border-top: 1px solid #1e1e1e;
						height: 100px;

						.right {
							.quxiao {
								width: 76px;
								height: 32px;
								border: 1px solid #ced4db;
								border-radius: 2px;
								margin-right: 24px;
							}

							.baocun {
								width: 76px;
								height: 32px;
								background: #165fff;
								border-radius: 2px;
								margin-right: 24px;
							}
						}
					}


				}
			}
		}
	}
</style>

<style scoped>
	/*flex*/
	.u-f,
	.u-f-item,
	.u-f-justify,
	.u-f-right,
	.u-f-bottom,
	.u-f-end,
	.u-f-jsb {
		display: flex;
	}

	.u-f-bottom {
		align-items: flex-end;

	}

	.u-f-item,
	.u-f-justify,
	.u-f-right {
		align-items: center;
	}

	.u-f-justify {
		justify-content: center;
	}

	.u-f-right {
		justify-content: flex-end;
	}

	.u-f-around {
		justify-content: space-around;
	}

	.u-f-jsb {
		justify-content: space-between;
	}

	.u-f-end {
		justify-content: flex-end;
	}

	.u-f-column {
		flex-direction: column;
	}

	.u-f-wrap {
		flex-wrap: wrap;
	}



	.cursor {
		cursor: pointer;
	}

	.singleLine {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.multipleLines {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
	}

	/* 覆盖默认样式 */
	.custom-select /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-select /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
	}

	/deep/ .el-tree-node__content:hover {
		background: #1e1e1e;
	}

	/deep/.el-tree-node:focus>.el-tree-node__content {
		background: #1e1e1e;
	}

	/* 覆盖默认样式 */
	.custom-width /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-width /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
		width: 253px;
		margin: auto;
	}

	/* 覆盖默认样式 */
	.custom-width1 /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-width1 /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
		width: 153px;
		margin: auto;
	}

	::v-deep .custom-textarea .el-textarea__inner {
		background-color: #5C5C5C;
		border: 1px solid #5C5C5C;
		color: #fff;
		border: none;
	}

	::v-deep .custom-number-input .el-input__inner {
		background-color: #5C5C5C;
		border: 1px solid #5C5C5C;
		color: #fff;
		border: none;
	}

	::v-deep .custom-number-input .el-input__wrapper {
		background-color: #5C5C5C;
	}
</style>